<template>
  <div>

    <el-table
        ref="filterTable"
        :data="tableData"
        border
        style="width: 100%">

      <el-table-column
          label="设备id"
          prop="id"
          width="70">
      </el-table-column>

      <el-table-column
          label="设备名"
          prop="name"
          width="100">
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="typetages"
          filter-placement="bottom-end"
          label="设备类型"
          prop="typeid"
          width="100">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag disable-transitions>
          <span v-for="type in types" v-show="type.id == scope.row.typeid">
            {{type.typename}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          :formatter="formatter"
          label="设备简介"
          prop="description">
      </el-table-column>

      <el-table-column
          :filter-method="filterHandler"
          :filters="statustages"
          filter-placement="bottom-end"
          label="设备状态"
          prop="statusid"
          width="100">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.statusid == 1 ? 'success' : 'warning'"
              disable-transitions>
          <span v-for="status in statuses" v-if="status.id==scope.row.statusid">
            {{status.status}}
          </span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          :filter-method="filterHandler"
          :filters="comefroms"
          filter-placement="bottom-end"
          label="设备租用状态"
          prop="comefrom"
          width="100">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag
              :type="getType(scope.row)"
              disable-transitions>
          <span v-for="come in comefroms" v-if="scope.row.comefrom==come.value">
            {{come.text}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.borrowable"
              round
              size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)">租借
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="page">
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible" title="租用设备" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="起租日期" required style="width: auto">
          <el-col :span="11">
            <el-form-item prop="borrowdate">
              <el-date-picker v-model="form.borrowdate" placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="归还日期" required style="width: auto">
          <el-col :span="11">
            <el-form-item prop="returntime">
              <el-date-picker v-model="form.returntime" placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="
        dialogVisible = false;
        this.$message({
          message: '修改取消!',
          type: 'warning'
      })"
        >取消</el-button>
        <el-button type="primary" @click="submitForm('form')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dialogVisible:false,
      pageSize: 14,
      total: null,
      statuses:null,
      tableData: null,
      types:null,
      statustages:[],
      typetages:[],
      comefroms:[{text:"未被租用",value:1},{text:"已被租用",value:2},{text:"自有设备",value:3}],
      currentPage:1,
      form:{
        equipmentid:null,
        borrowerid:this.$store.state.factoryid,
        borrowdate:null,
        returntime:null
      },
      //form表单内数据验证
      borrowdate: {
        disabledDate: time => {
          if (this.form.returntime) {
            return (
                time.getTime() > new Date(this.form.returntime).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      returntime: {
        disabledDate: time => {
          if (this.form.borrowedate) {
            return (
                time.getTime() > Date.now() ||
                time.getTime() < new Date(this.form.borrowedate).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      rules:{
        borrowdate: [
          { required: true, message: '起租日期不能为空', trigger: 'blur' }
        ],
        returntime: [
          { required: true, message: '归还日期不能为空', trigger: 'blur' }
        ],
      }

    }
  },created(){
    this.getTableData();
    axios.get('http://localhost:8081/equipmenttype/findAll/1/' + this.pageSize).then(
        (response) => {
          this.types = response.data.content;

          for (const type of this.types) {
            const tage = {text: type.typename, value: type.id};
            this.typetages.push(tage);
          }
        }
    );
    axios.get('http://localhost:8081/equipmentstatus/findAll/1/' + this.pageSize).then(
        (response) => {
          this.statuses = response.data.content;

          for (const sta of this.statuses) {
            const tage = {text: sta.status, value: sta.id};
            this.statustages.push(tage);
          }
        }
    );
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.typeid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page(currentPage) {
      this.currentPage=currentPage;
      this.getTableData();
    },
    handleDelete(index, row) {
      if(row.factoryid != 0){
        this.$alert('该设备无法被租用', '不可租用', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message.error({
              message: `错误: 该设备不可被租用`
            });
          }
        });
      }else{
        this.form.equipmentid=row.id;
        this.dialogVisible=true;
      }

    },submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/loan/add',this.form).then((response)=>{
            if(response.data == "success"){
              this.success();
              this.dialogVisible = false;
              this.getTableData();
            }else{
              this.failed();
              this.dialogVisible = false;
            }
          });
        } else {
          this.failed();
          this.dialogVisible = false;
          this.$message.error('日期不能为空!');
          return false;
        }
      });
    },
    success() {
      this.getTableData();
      this.$message({
        message: '租借成功!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('租借失败!');
    },
    getType(row){
      let type='';
      switch (row.comefrom){
        case 1:
          type='success';
          break;
        case 2:
          type='warning';
          break;
        case 3:
          type='';
      }
      return type;
    },
    getTableData() {
        axios.get('http://localhost:8081/loan/findAll/' + this.currentPage + '/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
              this.getComefrom();
            }
        );
    },
    getComefrom(){
      for (const row of this.tableData) {
        if (row.borrowable) {
          if (row.factoryid == 0) {
            this.$set(row, "comefrom", 1);
          } else {
            this.$set(row, "comefrom", 2);
          }
        } else {
          this.$set(row, "comefrom", 3);
        }
      };
    },

  }
}
</script>